<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../4.29  js/2.js"></script>
 <script>
   function $$(id) {
    return document.getElementById(id);
   }   
   window.onload=function(){
    var cnv = $$("canvas");
    var cxt = cnv.getContext("2d");
    
    drawBall(cnv.width/2,cnv.height/2);
    var x = 100;
    var y = 75;
    var key = tools.getKey();
    window.addEventListener("keydown",function(e){
     cxt.clearRect(0,0,cnv.width,cnv.height);
     switch(key.direction){
      case"up":
      y-=2;
      drawBall(x,y);
      break;
      case"down":
      y+=2;
      drawBall(x,y);
      break;
      case"left":
      x-=2;
      drawBall(x,y);
      break;
      case"right":
      x+=2;
      drawBall(x,y);
      break;
      
      default:
      drawBall(x,y);
     }
    },false);
    
    function drawBall(x,y){
     cxt.beginPath();
     cxt.arc(x,y,20,0,360*Math.PI/180,true);
     cxt.closePath();
     cxt.fillStyle="#6699FF";
     cxt.fill();
    }
   }   
 </script>
</head>
 <body>
  <canvas id="canvas" width="200" height="150" style="border: 1px solid silver;"></canvas><br />
 </body>
<ml>